<template>
  <div
      style="width: 95%;height: 120%; position: relative;left: 50%;transform: translateX(-50%);padding:20px 80px 0px 80px;">
    <div style="width: 100%;display:flex;justify-content: end">
      <el-button type="primary" @click="onSubmit('save')">保存</el-button>
      <el-button type="success" @click="onSubmit('shenbao')">立即申报</el-button>
      <el-button @click="resetForm('newXm')">重置</el-button>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="jbxx">
        <div>
          <el-form ref="form" :model="newXm" label-width="200px" class="demo-form-inline">

            <el-form-item label="项目类型">
              <el-select v-model="newXm.xmXmlxbh" placeholder="请选择项目类型">
                <el-option
                    v-for="item in xmlxSel"
                    :key="item.keyvalue"
                    :label="item.keyname"
                    :value="item.keyvalue">
                </el-option>
              </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="项目名称">
              <el-input v-model="newXm.xmMc" style="width: 80%"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="项目简介">
              <el-input type="textarea" :rows="4" v-model="newXm.xmJj" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="项目创新点">
              <el-input type="textarea" :rows="4" v-model="newXm.xmcxd" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="项目背景">
              <el-input type="textarea" :rows="4" v-model="newXm.xmBj" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="项目意义">
              <el-input type="textarea" :rows="4" v-model="newXm.xmYy" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="市场需求分析">
              <el-input type="textarea" :rows="4" v-model="newXm.xmScxqfx" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="项目关键技术介绍">
              <el-input type="textarea" :rows="4" v-model="newXm.xmGjjsjs" style="width: 80%"></el-input>
            </el-form-item>
            <br/>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="计划书" name="jhs">
        <div style="padding:2rem 0rem 2rem 0;position: relative;left:50%; transform: translateX(-50%);width:400px;display: flex;justify-content: space-around">
          <el-upload
              ref="upload"
              action="http://localhost:8089/cxcyXm/fileUpload"
              :data="{'xmBh':xmbh}"
              :on-remove="handleRemove"
              :on-success="uploadSuccess"
              :limit="1"
              :show-file-list="false">
            <el-button type="primary">上传计划书(Word)</el-button>
          </el-upload>
          <el-button @click="downloadTemplate()">下载计划书(Word)模板</el-button>
        </div>

        <el-table stripe :border="true" v-if="newXm.xmJhsdz !== ''"
                  :data="[{xmBh:xmBh,xmJhsdz:newXm.xmJhsdz}]"
                  style="width: 90%;margin-bottom: 15px;position: relative;left: 50%;transform: translateX(-50%);">
          <el-table-column prop="xmJhsdz" label="文件名"  header-align="center" align="center">
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="downloadJhs(scope.row.xmJhsdz)" type="primary" size="mini">下载计划书
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="项目成员" name="xmcy">
        <!-- 项目团队表格 -->
        <div style="padding-right: 70rem;padding-bottom: 1rem">
          <el-button type="success" @click="dialogVisible = true">填加项目成员</el-button>
        </div>
        <el-table
            :data="xmcys"
            style="width: 85%;margin-bottom: 15px;position: relative;left: 50%;transform: translateX(-50%);">
          <el-table-column title="cyXh" prop="cyXh" label="学号" width="130px" header-align="center" align="center">
          </el-table-column>
          <el-table-column title="cyMc" prop="cyMc" label="姓名" width="110px" header-align="center" align="center">
          </el-table-column>
          <el-table-column title="cySjh" prop="cySjh" label="手机号" width="150px" header-align="center" align="center">
          </el-table-column>
          <el-table-column title="cyXy" prop="cyXy" label="所属学院" width="150px" header-align="center" align="center">
          </el-table-column>
          <el-table-column title="cyBj" prop="cyBj" label="班级" width="200px" header-align="center" align="center">
          </el-table-column>
          <el-table-column title="cyJs" prop="cyJs" label="介绍" width="380px" header-align="center" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100px" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button  size="mini" type="text" @click="toupdateXmcy(scope.$index, scope.row)">修改</el-button>
              <el-popconfirm  style="margin-left: 10px;" title="确定移除该成员吗？"
                              @confirm="deleteRow(scope.$index, xmcys)">
                <el-button slot="reference" size="mini" type="text">移除</el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>


    <!-- 添加项目团队成员弹窗 -->
    <el-dialog
        title="添加项目团队成员"
        :visible.sync="dialogVisible"
        width="30%"
        :modal-append-to-body="false">
      <span>
        <el-form
            :model="xmcyForm"
            stripe
            ref="xmcyForm"
            label-width="100px"
            :rules="xmcyFormRules">
        <el-form-item prop="cyXh" label="学号">
          <el-input v-model="xmcyForm.cyXh" style="width: 20rem"></el-input>
        </el-form-item>
        <el-form-item prop="cyMc" label="姓名">
          <el-input v-model="xmcyForm.cyMc" style="width: 20rem"></el-input>
        </el-form-item>
        <el-form-item prop="cySjh" label="手机号码">
          <el-input v-model="xmcyForm.cySjh" style="width: 20rem"></el-input>
        </el-form-item>
        <el-form-item prop="cyXy" label="学院">
          <el-select v-model="xmcyForm.cyXy" placeholder="请选择学院">
            <el-option v-for="item in xy" :key="item.keyname" :label="item.keyname" :value="item.keyname">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="cyBj" label="班级">
          <el-input v-model="xmcyForm.cyBj" style="width: 20rem"></el-input>
        </el-form-item>
           <el-form-item prop="cyJs" label="成员介绍">
          <el-input type="textarea" :rows="3" v-model="xmcyForm.cyJs" style="width: 20rem"></el-input>
        </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="xmcyFormSubmit('xmcyForm')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改项目团队成员弹窗 -->
    <el-dialog title="添加项目团队成员" :visible.sync="upXmcyVisible" width="30%" :modal-append-to-body="false">
      <span>
        <el-form
            :model="upXmcy"
            stripe
            ref="upXmcy"
            label-width="100px"
            :rules="xmcyFormRules">
        <el-form-item prop="cyXh" label="学号">
          <el-input v-model="upXmcy.cyXh" style="width: 20rem"></el-input>
        </el-form-item>
        <el-form-item prop="cyMc" label="姓名">
          <el-input v-model="upXmcy.cyMc" style="width: 20rem"></el-input>
        </el-form-item>
        <el-form-item prop="cySjh" label="手机号码">
          <el-input v-model="upXmcy.cySjh" style="width: 20rem"></el-input>
        </el-form-item>
        <el-form-item prop="cyXy" label="学院">
          <el-select v-model="upXmcy.cyXy" placeholder="请选择学院">
            <el-option v-for="item in xy" :key="item.keyname" :label="item.keyname" :value="item.keyname">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="cyBj" label="班级">
          <el-input v-model="upXmcy.cyBj" style="width: 20rem"></el-input>
        </el-form-item>
           <el-form-item prop="cyJs" label="成员介绍">
          <el-input type="textarea" :rows="3" v-model="upXmcy.cyJs" style="width: 20rem"></el-input>
        </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="upXmcyVisible = false">取 消</el-button>
        <el-button type="primary" @click="upxmcyFormSubmit('upXmcy')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {cxcyxmShenBao} from "@/api/cxcyxm"

import exportWordAndImage from "../../components/downLoadWord";
import axios from "../../axios/axios.js";
import { saveAs } from 'file-saver';
import {selectRole} from "@/api/role";

export default {
  data() {
    return {
      updateRowIndex:0,
      upXmcyVisible:false,
      activeName: "jbxx",
      xmBh: "",
      newXm: {
        xmMc: "",
        xmJj: "",
        xmcxd: "",
        xmXmlxbh: "",
        xmBj: "",
        xmYy: "",
        xmScxqfx: "",
        xmGjjsjs: "",
        xmJhsdz: "",
        czbz: ""
      },
      xmlxSel: [],
      xmcyForm: {
        roleBh: "",
        roleMc: "",
        cyXh: "",
        cyMc: "",
        cySjh: "",
        cyXy: "",
        cyBj: "",
        cyJs: "",
        index: 0
      },
      upXmcy:{},
      xmcysisNoll: true,
      xmcyFormRules: {
        cyXh: [{required: true, message: '请输入12位数字的学号', trigger: 'blur'},
          {validator: this.validateNumber, trigger: 'blur'}],
        cyMc: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        cySjh: [{required: true, message: '请输入正确手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '学号为11位', trigger: 'blur'}],
        cyXy: [{required: true, message: '请输入学院', trigger: 'blur'}],
        cyBj: [{required: true, message: '请输入班级', trigger: 'blur'}]
      },
      xmcys: [],
      dialogVisible: false,
      xy: [],
      token: localStorage.getItem('token'),
    }
  },
  created() {
    this.xmBh = localStorage.getItem("xmBh")
    if (this.xmBh != null && this.xmBh != "null") {
      this.toXmDetail(this.xmBh);
    }
    this.queryKey("xmlx,xy")
  },
  methods: {
    toXmDetail(xmbh) {
      axios({
        method: 'GET',
        url: 'cxcyXm/queryCxcyXmByBh/' + xmbh
      }).then(res => {
        if (res.code === "200") {
          this.newXm = res.data.xmDetail
          this.xmcys = res.data.xmcyList
          this.xmcyForm.index = this.xmcys.length
          if (this.xmcyForm.index !== 0){
            this.xmcysisNoll = false
          }
        } else {
          this.$message.error(res.msg)
        }

      })
    },
    validateNumber(rule, value, callback) {
      if (!/^\d{12}$/.test(value)) {
        callback(new Error('请输入12位数字'))
      } else {
        callback()
      }
    },
    queryKey(keyCodes) {
      axios({
        method: 'GET',
        url: '/keyValue/queryKey?keyCodes=' + keyCodes
      }).then(res => {
        if (res.code == "200") {
          this.xmlxSel = res.data.xmlx
          this.xy = res.data.xy
        }
      })
    },
    onSubmit(czbz) {
      this.newXm.czbz = czbz
      this.newXm["xmCyList"] = this.xmcys
      cxcyxmShenBao(this.newXm).then(res => {
        if (res.code === "200") {
          this.$message.success(res.msg);
          this.xmBh =  res.data.xmBh
          localStorage.setItem("xmBh",res.data.xmBh)
          this.toXmDetail(this.xmBh);
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    // 添加项目成员至项目成员表格
    xmcyFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$set(this.xmcys, this.xmcyForm.index,
              {
                cyXh: this.xmcyForm.cyXh,
                cyMc: this.xmcyForm.cyMc,
                cySjh: this.xmcyForm.cySjh,
                cyXy: this.xmcyForm.cyXy,
                cyBj: this.xmcyForm.cyBj,
                cyJs: this.xmcyForm.cyJs,

              })

          this.xmcyForm.index++

          this.xmcyForm.cyXh = ''
          this.xmcyForm.cyMc = ''
          this.xmcyForm.cySjh = ''
          this.xmcyForm.cyXy = ''
          this.xmcyForm.cyBj = ''
          this.xmcyForm.cyJs = ''

          this.dialogVisible = false;
          this.xmcysisNoll = false
        } else {
          return false;
        }
      });

    },
    toupdateXmcy(index, row){
      this.updateRowIndex = index
      this.upXmcy = {...row}
      this.upXmcyVisible = true;

    },
    upxmcyFormSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$set(this.xmcys, this.updateRowIndex,
              {
                cyXh: this.upXmcy.cyXh,
                cyMc: this.upXmcy.cyMc,
                cySjh: this.upXmcy.cySjh,
                cyXy: this.upXmcy.cyXy,
                cyBj: this.upXmcy.cyBj,
                cyJs: this.upXmcy.cyJs,
              })
          this.upXmcyVisible = false;
        } else {
          return false;
        }
      });
    },
    //删除施工人员表格一列
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    //表单数据重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    uploadSuccess(res) {
      this.$message.success("计划书上传成功")
      this.toXmDetail();
      this.$router.go(0)
    },
    handleRemove(file) {
      var path = file.response.data
      var fileFlag = path.split("/")[path.split("/").length - 1]
      axios({
        method: "GET",
        url: "/cxcyXm/removeFiles/" + fileFlag
      }).then(res => {
        if (res.code == "200") {
          this.$refs['upload'].clearFiles()
          this.newXm.xmJhsdz = ''
        }
      })
    },
    downloadTemplate(){
      exportWordAndImage("Template.docx");
    },
    downloadJhs(jhsdz){
      // exportWordAndImage(jhsdz);
      const x = new XMLHttpRequest();
      x.open("GET", jhsdz, true);
      x.responseType = "blob";
      x.onload = function () {
        const url = window.URL.createObjectURL(x.response);
        const elink = document.createElement("a");
        elink.href = url;
        elink.target = "_self"; // 当前也 target打开新页面
        elink.setAttribute("download", jhsdz);
        elink.style.display = "none";
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      };
      x.send();
    }
  }

}
</script>
